<template>
  <div class="addEdit-block" style="width: 100%">
    <el-form
      :style="{
        width: '90%',
        padding: '30px',
        margin: '15px auto',
        borderRadius: '6px',
        flexWrap: 'wrap',
        display: 'flex',
      }"
      class="add-update-preview"
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="资产图片" prop="zichantupian">
        <file-upload
          tip="点击上传资产图片"
          action="file/upload"
          :limit="3"
          :multiple="true"
          :fileUrls="ruleForm.zichantupian ? ruleForm.zichantupian : ''"
          @change="zichantupianUploadChange"
        ></file-upload>
      </el-form-item>
      <el-form-item label="分级等级">
        <span v-if="gradeLevel">{{ gradeLevel }}</span>
        <span v-else>暂无分级等级</span>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitGrade">提交分级</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        zichantupian: "",
      },
      gradeLevel: null,
      rules: {
        zichantupian: [
          { required: true, message: "资产图片不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    zichantupianUploadChange(fileUrls) {
      this.ruleForm.zichantupian = fileUrls;
    },
    submitGrade() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 调用大模型接口获取分级等级
          this.$http({
            url: "your-api-url", // 替换为实际的大模型接口URL
            method: "post",
            data: {
              id: this.$route.params.id,
              zichantupian: this.ruleForm.zichantupian,
            },
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.gradeLevel = data.gradeLevel;
              this.$message({
                message: "分级成功",
                type: "success",
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-upload {
  border: none !important;
}
.el-upload .el-button {
  background-color: transparent !important;
  border: none !important;
  color: #666 !important;
  padding: 0 !important; /* 移除内边距，使布局更紧凑 */
}
.el-upload .el-button:hover {
  background-color: #f0f0f0 !important;
  color: #333 !important;
}

/* 上传按钮样式 */
.el-upload .el-button {
  background-color: #fdb96b;
  border-color: #fdb96b;
  color: #fff;
  transition: background-color 0.3s ease;
}

.el-upload .el-button:hover {
  background-color: #fda749;
  border-color: #fda749;
}
</style>
